/**
 * 预定成功
 * @email 626097912@qq.com
 * Created by dength on 2017/04/11
 * 
 * 待处理：订单超时自动取消的效果
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Alert,
    ScrollView
} from 'react-native';
import BaseComponent from '../base/baseComponent';
import Constants from '../base/constants';
import { getNavigator } from '../route/route';
import CommonStyles from '../base/commonStyles';

class ScheduledSuccess extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            isCancel: false,      //订单取消与否,true为no,false为yes
            promptText: 0,        //消息提示,初始状态为1
            ispayStatus: false,   //支付与否，控制改签按钮，支付状态文字
            bottomBt: true,       //底部支付按钮
        }
    }

    //跳转方法
    _onPress(navname) { getNavigator().push({ name: navname }); }

    getNavigationBarProps() {
        return {
            title: '预订成功',
            leftButtonImage: require('../images/ic_return.png'),
            hideRightButton: true,
        };
    }

    //取消订单按钮
    _lot() {
        let {isCancel, promptText, bottomBt, ispayStatus} = this.state;
        this.setState({
            isCancel: true,
            promptText: 2,
            bottomBt: false,
            ispayStatus: false,
        });
    }
    //立即支付
    _ImmediatePay() {
        let {bottomBt, promptText, ispayStatus} = this.state;
        this.setState({
            bottomBt: false,
            promptText: 1,
            ispayStatus: !ispayStatus,
        });
    }

    renderPromptMessage() {
        let { promptText } = this.state;
        switch (promptText) {
            //当前订单未操作，初始化显示提示信息
            case 0:
                return (
                    <Text style={styles.Prompt_box_tx}>
                        车票已成功预订，请在
                    <Text style={{ color: 'red', fontSize: 12 }}>9:59</Text>
                        分钟内通过12306网站完成网络支付，否则系统将自动取消本次交易。
                </Text>
                );
            //当前订单已支付，提示领取票
            case 1:
                return (
                    <TouchableOpacity
                        onPress={() => this._onPress('TgExplain')}
                        activeOpacity={0.8}>
                        <Text style={styles.Prompt_box_tx}>
                            购票成功,请凭购票时有效身份证到火车站、人工窗口、自动取票机或代售点领取。
                         <Text style={{ color: 'red', fontSize: 12 }}>退改说明</Text>
                        </Text>
                    </TouchableOpacity>
                );
            // 当前订单已取消
            case 2:
                return (
                    <Text style={styles.Prompt_box_tx}>
                        已超过时限，未完成网络支付，订单自动取消。
                    </Text>
                );
        }
    }

    renderPaymentText() {
        let { ispayStatus, isCancel, } = this.state;
        //订单未取消则显示
        if (isCancel === false) {
            //未支付则显示
            if (ispayStatus === false) {
                return (
                    <View style={styles.box_top}>
                        <Text style={styles.box_xia_tx}>订单状态</Text>
                        <Text style={{ color: 'red', fontSize: 12 }}>待支付</Text>
                    </View>
                )
            }
            if (ispayStatus === true) {
                return (
                    <View style={styles.box_top}>
                        <Text style={styles.box_xia_tx}>订单状态</Text>
                        <Text style={{ color: 'red', fontSize: 12 }}>购票成功</Text>
                    </View>
                )
            }
        }
    }

    renderBody() {
        let {isCancel, ispayStatus, bottomBt} = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.Prompt}>
                    <View style={styles.Prompt_box}>
                        {this.renderPromptMessage()}
                    </View>
                </View>
                {/*购票信息*/}
                <ScrollView showsVerticalScrollIndicator={false}>
                    <View style={{ margin: 15, marginBottom: 65 }}>
                        <Image style={styles.Images_z}
                            source={isCancel ? require('../images/ic_sdSuccess_f.png') : require('../images/ic_sdSuccess_z.png')}
                            >
                            <View style={{ margin: 10 }}>
                                <View style={styles.box_top}>
                                    <Text style={styles.box_top_tx}>取票号:
                                <Text style={{ paddingLeft: 5 }}>E0612668</Text>
                                    </Text>
                                    <Text style={styles.box_top_tx}>2017年4月11日</Text>
                                </View>

                                <View style={styles.box_center}>
                                    <View style={styles.box_center_li}>
                                        <Text style={styles.box_center_tx}>长沙南</Text>
                                    </View>
                                    <View style={styles.box_center_li}>
                                        <Text style={styles.box_center_tx}>G6025</Text>
                                        <View style={styles.img_position}>
                                            <Image style={{ width: 50, height: 4 }} source={require('../images/ic_sdSuccess_xian.png')} />
                                        </View>
                                    </View>
                                    <View style={styles.box_center_li}>
                                        <Text style={styles.box_center_tx}>深圳北</Text>
                                    </View>
                                </View>

                                <View style={styles.box_tottom}>
                                    <View style={styles.box_center_li}>
                                        <Text style={styles.box_tottom_tx}>18:16</Text>
                                    </View>
                                    <View style={styles.box_center_li}></View>
                                    <View style={styles.box_center_li}>
                                        <Text style={styles.box_tottom_tx}>21:36</Text>
                                    </View>
                                </View>

                            </View>
                        </Image>
                        <View style={styles.piaoxin}>
                            <View style={{ margin: 10 }}>
                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>乘客姓名</Text>
                                    <Text style={styles.box_xia_tx}>05车厢06号</Text>
                                </View>

                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>成人票</Text>
                                    <Text style={styles.box_xia_tx}>一等座</Text>
                                </View>

                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>43000*****54545</Text>
                                    <Text style={styles.box_xia_tx}>￥603.5</Text>
                                </View>

                                {this.renderPaymentText()}

                            </View>
                        </View>

                        <Image style={styles.infos_c_img} source={require('../images/ic_gtHalfway_c.png')} />

                        <View style={[styles.piaoxin]}>
                            <View style={{ margin: 10 }}>
                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>乘客姓名</Text>
                                    <Text style={styles.box_xia_tx}>05车厢06号</Text>
                                </View>

                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>成人票</Text>
                                    <Text style={styles.box_xia_tx}>一等座</Text>
                                </View>

                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>43000*****54545</Text>
                                    <Text style={styles.box_xia_tx}>￥603.5</Text>
                                </View>

                                {this.renderPaymentText()}

                            </View>
                        </View>
                        <Image style={styles.infos_c_img} source={require('../images/ic_gtHalfway_c.png')} />

                        <View style={[styles.piaoxin, styles.roundCorner]}>
                            <View style={{ margin: 10 }}>
                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>乘客姓名</Text>
                                    <Text style={styles.box_xia_tx}>05车厢06号</Text>
                                </View>

                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>成人票</Text>
                                    <Text style={styles.box_xia_tx}>一等座</Text>
                                </View>

                                <View style={styles.box_top}>
                                    <Text style={styles.box_xia_tx}>43000*****54545</Text>
                                    <Text style={styles.box_xia_tx}>￥603.5</Text>
                                </View>

                                {this.renderPaymentText()}

                            </View>
                        </View>


                        <View style={styles.view_bt}>
                            {
                                ispayStatus ?
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        onPress={() => this._onPress('TicketChanges')}
                                        style={styles.buttom_lf}
                                        >
                                        <Text style={{ color: 'white' }}>改签</Text>
                                    </TouchableOpacity>
                                    :
                                    null
                            }
                            {
                                isCancel ?
                                    null
                                    :
                                    <TouchableOpacity
                                        activeOpacity={0.8}
                                        style={styles.buttom}
                                        onPress={() => {
                                            Alert.alert(
                                                "取消订单",
                                                "您确定取消当前订单吗？",
                                                [
                                                    { text: "取消", onPress: () => { } },
                                                    { text: "确定", onPress: () => { this._lot() } },
                                                ]
                                            );
                                        } }
                                        >
                                        <Text style={{ color: '#555555' }}>取消订单</Text>
                                    </TouchableOpacity>
                            }

                        </View>


                        {/*取消订单状态定位图*/}
                        {
                            isCancel ?
                                <View style={{ position: 'absolute', left: (Constants.window.width - 100) / 2 - 20, top: 80 }}>
                                    <Image style={{ width: 100, height: 63 }} source={require('../images/ic_sdSuccess_q.png')} />
                                </View>
                                :
                                null
                        }
                    </View>
                </ScrollView>
                {/*支付块*/}
                {
                    bottomBt ?
                        <View style={styles.bottom_pay}>
                            <View style={styles.pay_lf}>
                                <Text style={styles.pay_lf_tx}>
                                    实付款:
                            <Text style={styles.pay_lf_rtx}>
                                        ￥603.5
                            </Text>
                                </Text>
                            </View>
                            <TouchableOpacity
                                activeOpacity={1}
                                onPress={() => this._ImmediatePay()}
                                style={styles.pay_rg}>
                                <Text style={styles.pay_rg_tx}>
                                    立即支付
                        </Text>
                            </TouchableOpacity>
                        </View>
                        :
                        null
                }
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: CommonStyles.colors.background,
    },
    Prompt: {
        backgroundColor: '#FFF7DC',
    },
    Prompt_box: {
        marginLeft: 15, marginRight: 15, height: 49,
        paddingTop: 10,
        flexDirection: 'row'
    },
    Prompt_box_tx: {
        fontSize: 10, color: '#555555'
    },
    Images_z: {
        width: Constants.window.width - 30, height: 125
    },
    box_top: {
        flexDirection: 'row', justifyContent: 'space-between', height: 20,
    },
    box_top_tx: {
        fontSize: 12, color: '#E9EEF3'
    },
    box_center: {
        marginTop: 15, flexDirection: 'row', height: 25,
    },
    box_center_li: {
        width: (Constants.window.width - 50) / 3, alignItems: 'center',
    },
    box_center_tx: {
        color: CommonStyles.colors.white, fontSize: 18, fontWeight: 'bold'
    },
    box_tottom_tx: {
        color: CommonStyles.colors.white, fontSize: 12,
    },
    box_tottom: {
        flexDirection: 'row', height: 20, marginTop: 10,
    },
    img_position: {
        position: 'absolute', bottom: -3, right: ((Constants.window.width - 50) / 3 - 50) / 2
    },
    box_xia_tx: {
        fontSize: 12, color: '#555555'
    },
    buttom_lf: {
        height: 30, alignItems: 'center', justifyContent: 'center', backgroundColor: '#FF8B00',
        borderRadius: 5, width: 100, marginRight: 14
    },
    buttom: {
        height: 30, alignItems: 'center', justifyContent: 'center', borderColor: '#555555', borderWidth: 1,
        borderRadius: 5, width: 100
    },
    view_bt: {
        justifyContent: 'flex-end', flexDirection: 'row', marginTop: 20
    },
    //左右底部圆角
    roundCorner: {
        borderBottomLeftRadius: 10, borderBottomRightRadius: 10
    },
    piaoxin: {
        backgroundColor: 'white', width: Constants.window.width - 30
    },
    //分栏图
    infos_c_img: {
        width: Constants.window.width - 30, height: 15
    },
    //支付状态
    bottom_pay: {
        position: 'absolute', bottom: 0, height: 50, width: Constants.window.width, flexDirection: 'row',
    },
    pay_lf: {
        backgroundColor: '#F4F7F9', width: Constants.window.width - 114, justifyContent: 'center',
    },
    pay_lf_tx: {
        fontSize: 15, color: '#FF002E', paddingLeft: 15
    },
    pay_lf_rtx: {
        fontSize: 14, color: '#FF002E', paddingLeft: 3
    },
    pay_rg: {
        backgroundColor: '#FF6600', width: 114, justifyContent: 'center', alignItems: 'center'
    },
    pay_rg_tx: {
        color: 'white', fontSize: 15
    }

});

export default ScheduledSuccess;